<template>
    <div id="ordersIncomplete" class="content">
        <!-- 页面标题 -->
        <div class="tilte-bar" v-if="isComplete==='0'">未完成订单</div>
        <div class="tilte-bar" v-if="isComplete==='1'">已完成订单</div>
        <div class="tilte-bar" v-if="isComplete==='2'">待支付订单</div>
        <!-- 搜索框 -->
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label label-width">订单提交开始时间：</label></div>
            <div class="weui-cell__bd">
                <input type="date" v-model='searchOrder.startTime'>
            </div>
        </div>
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label label-width">订单提交截至时间：</label></div>
            <div class="weui-cell__bd">
                <input type="date" v-model='searchOrder.endTime'>
            </div>
        </div>
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label label-width">城市：</label></div>
            <div class="weui-cell__bd">
                <div class="weui-cell__hd_1">
                    <select class='weui-select' v-model="searchOrder.city">
                        <option value="">请选择</option>
                        <option v-for="city in citySearchList" :value="city">{{city}}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="weui-cell weui-cell-background-color">
            <div class="weui-cell__hd"><label class="weui-label label-width">工程名称：</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" type="text" v-model="searchOrder.projectName" placeholder="请输入工程名称">
            </div>
        </div>
        <div v-if="searchWarnningTag" class="button-warnning">{{searchWarnningMessage}}</div>
        <span class="weui-btn weui-btn_primary margin-1" @click="searchOrderList">搜索</span>
        <!-- 没有已完成订单 -->
        <template v-if="countUncompletedOrderFlag">
            <a class="weui-cell weui-cell_access weui-cell-background-color">
                <div class="weui-cell__bd  weui-main-info">
                    <p class="p-color">没有未完成订单</p>
                </div>
            </a>
        </template>
        <!-- 没有未完成订单 -->
        <template v-if="countCompletedOrderFlag">
            <a class="weui-cell weui-cell_access weui-cell-background-color">
                <div class="weui-cell__bd  weui-main-info">
                    <p class="p-color">没有已完成订单</p>
                </div>
            </a>
        </template>
        <!-- 未完成订单 WEUI -->
        <router-link  :to="{ name: 'orderDetails', params: { orderId: order.order_id }}" class="weui-cell weui-cell_access weui-cell-background-color" href="javascript:;"  v-for="(order, index) in orderList" :key="index">
            <div class="weui-cell__bd  weui-main-info">
                <p>
                    <template v-if="order.project_name">
                        {{order.project_name}}    
                    </template>
                    <template v-else>
                        未知项目名称
                    </template>
                </p>
                <p class="weui-show-time">
                    <template v-if="order.create_time">
                        {{order.create_time}}    
                    </template>
                    <template v-else>
                        未知项目创建时间
                    </template>
                </p>
            </div>
            <div class="weui-cell__ft">
                <div>
                    <template v-if="order.order_org">
                        {{order.order_org}}
                    </template>
                    <template v-else>
                        未知委托单位
                    </template>
                </div>
                <div>
                    <template v-if="order.city">
                        {{order.city}}
                    </template>
                    <template v-else>
                        未知城市
                    </template>
                </div>
            </div>
        </router-link>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 搜索框警告信息
                searchWarnningTag: false,
                searchWarnningMessage: '',
                // 订单类型
                isComplete: "",
                // 显示 ‘没有已完成订单’信息
                countCompletedOrderFlag: false,
                // 显示 ‘没有未完成订单’信息
                countUncompletedOrderFlag: false,
                // 订单列表
                orderList: [],
                // 查询框的输入值
                searchOrder: {
                    userId: localStorage.userId,
                    startTime: '',
                    endTime: '',
                    city: '',
                    projectName: ''
                },
                // 城市搜索列表
                citySearchList: []
            }
        },
        async beforeMount () {
            this.isComplete = this.$route.params.is_complete;
            if(this.isComplete==='0') {
                // 为未完成订单页面
                if (!window.localStorage['userOpenId']) {
                    // 未获取到userOpenId
                    await this.getOpenID();
                } else {
                    // 获取到userOpenId
                    await this.isBindAccount();
                }
            }
        },
        mounted() {
            if(localStorage.userId) {
                this.searchOrderList();
                this.showCityList();
            }
        },
        watch: {
            //判断页面显示未完成订单('0')，还是已完成订单('1')，还是待支付订单（'2'）
            '$route' (to) {
                this.isComplete = to.params.is_complete;
                this.searchOrderList();
            }
        },
        methods: {
            //获取openID，并存到localstorage
            async getOpenID() {
                //拿到code,获取openID
                var _self = this;
                var user_code = _self.getQueryVariable("code");
                console.log(user_code)
                let { data } = await _self.$http({
                    method: 'post',
                    url: 'getOpenID',
                    data: { 
                        code: user_code
                    }
                })
                console.log(data)
                // TODO:存openId
                window.localStorage.userOpenId = data.data.openid;
                _self.isBindAccount();
            },
            //获取code值
            getQueryVariable: function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) { return pair[1]; }
                }
                return (false);
            },
            //获取用户在微信的基本信息
            // getUserWechatInfo: function() {
            //     let _self = this;
            //     _self.$http({
            //         method: 'post',
            //         url: 'personallnfo',
            //         data: {
            //             openId: window.localStorage.userOpenId
            //         }
            //     }).then(response => {
            //         console.log(response);
            //     })
            // },
            // TODO:有时间把判断用户是否绑定系统账号放到跳转路由前验证
            //是否绑定了系统账号
            isBindAccount: function() {
                let _self = this;
                // TODO:这个接口还没有
                _self.$http({
                    method: 'post',
                    url: 'checkBinding',
                    data: {
                        openId: window.localStorage.userOpenId
                    }
                }).then(response => {
                    console.log(response)
                    // TODO:跳到不同的页面
                    let data = response.data;
                    if(data.code === 0) {
                        // 用户已绑定
                        localStorage.userId = data.data.user_id;
                        _self.searchOrderList();
                    } else {
                        // 用户未绑定
                        window.location.href = './#/login'
                    }
                })
            },
            // 显示城市搜索列表
            showCityList: function() {
                let _self = this;
                _self.$http({
                    method: 'post',
                    url: 'searchCity',
                    data: {
                        "userId": localStorage.userId
                    }
                }).then( response => {
                    var data = response.data.data;
                    for(let i=0; i<data.length; i++) {
                        if(!data[i]) {
                            data.splice(i,1);
                            i--;
                        }
                    }
                    _self.citySearchList = data;
                })
            },
            // 搜索订单
            searchOrderList: function() {
                let _self = this;
                _self.orderList = [];
                _self.countCompletedOrderFlag = false;
                _self.countUncompletedOrderFlag = false;
                _self.searchWarnningTag = false;
                // 未完成搜索
                if(_self.isComplete==='0') {
                    _self.$http({
                    method: 'post',
                    url: 'searchUncompletedOrder',
                    data: _self.searchOrder
                    }).then( response => {
                        if(response.data.code === 0) {
                            _self.orderList = response.data.data;
                        } else {
                            _self.countUncompletedOrderFlag = true;
                            _self.searchWarnningTag = true;
                            _self.searchWarnningMessage = response.data.msg;
                            _self.orderList = [];
                        }
                    })
                }
                // 已完成搜索
                if(_self.isComplete==='1') {
                    _self.$http({
                    method: 'post',
                    url: 'searchCompletedOrder',
                    data: _self.searchOrder
                    }).then( response => {
                        if(response.data.code === 0) {
                            _self.orderList = response.data.data;
                        } else {
                            _self.countCompletedOrderFlag = true;
                            _self.searchWarnningTag = true;
                            _self.searchWarnningMessage = response.data.msg;
                        }
                    })
                }
                
            }
        }
    }
</script>

<style scoped>
    * {
        box-sizing: border-box;
    }
    html {
        font-size: 62.5%;
    }
    #ordersIncomplete {
        font-size: 1rem;
    }
    table {
        font-size: .8rem;
    }
    .th-width-1 {
        width: 40%
    }
    .th-width-2 {
        width: 35%
    }
    .th-width-3 {
        width: 25%
    }
    .p-color {
        color: #827979;
    }
    .margin-1 {
        margin: 1rem;
    }
    .label-width {
        width: 8.5rem !important;
    }
    .weui-show-time {
        color: #999;
        font-size: .8rem;
    }
</style>